<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button type="success" size="small" plain icon="fa fa-mail-forward" @click="returnList" > 返 回</el-button>
      </div>
      <el-form :model="appointForm" ref="appointForm" label-width="200px" :rules="roleRules">
        <el-row>
          <el-form-item label="医检机构" prop="institutionName" >
            <!--<el-input v-model="appointForm.institutionName" disabled></el-input>-->
            <span>{{appointForm.institutionName}}</span>
          </el-form-item>
          <el-form-item label="预约项目" prop="itemId">
            <el-select
              v-model="appointForm.itemId"
              clearable
              reserve-keyword
              placeholder="请选择预约项目"
            >
              <el-option
                v-for="item in pickAppointItemList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预约日期" prop="appointDate">
            <el-date-picker v-model="appointForm.appointDate" type="datetime"
                            :picker-options="pickerBeginDateBefore"
                            :default-value="timeDefaultShow"
                            value-format="yyyy-MM-dd"  placeholder="请选择预约日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="时间段" prop="appointTime" >
            <el-input v-model="appointForm.appointTime" placeholder="08:00-09:00"></el-input>
          </el-form-item>
          <el-form-item label="预约备注" prop="remark">
            <el-input type="textarea" v-model="appointForm.remark"></el-input>
          </el-form-item>
        </el-row>

        <div class="tit">
          <h2>患者信息</h2>
        </div>
        <el-row>
          <el-form-item label="患者姓名" prop="patientName">
            <el-input v-model.trim="appointForm.patientName"></el-input>
          </el-form-item>
          <el-form-item label="患者身份证" prop="patientCard">
            <el-input v-model.trim="appointForm.patientCard" ></el-input>
          </el-form-item>
          <el-form-item label="患者性别" prop="patientSex">
            <el-radio-group v-model="appointForm.patientSex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="患者年龄" prop="patientAge">
            <el-input v-model.trim="appointForm.patientAge" type="number"></el-input>
          </el-form-item>
          <el-form-item label="患者电话" prop="patientPhone">
            <el-input v-model.trim="appointForm.patientPhone" type="number"></el-input>
          </el-form-item>
          <el-form-item label="患者病史" prop="patientInfo">
            <el-input type="textarea" v-model="appointForm.patientInfo"></el-input>
          </el-form-item>
          <el-form-item label="初步诊断" prop="examineMsg">
            <el-input type="textarea" v-model="appointForm.examineMsg"></el-input>
          </el-form-item>
          <el-form-item label="预约备注" prop="remark">
            <el-input type="textarea" v-model="appointForm.remark"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item>
            <el-button
              type="primary"
              @click="sureReportClick"
            >保 存</el-button>
            <el-button @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

  </div>
</template>

<script>
import * as message from '@/constants/message';
import { mapGetters, mapActions } from 'vuex';
import AppointApi from "@/api/appoint/appoint";
import AppointItemApi from "@/api/appoint/appointItem";
export default {
  data () {
    return {
      loadingIns: false,
      disabled: false,
      isCenter: true,
      fullscreenLoading: false,
      dialogImageUrl: '',
      dialogVisible: false,
      withCredentials: true,
      pickAppointItemList: [],
      appointForm: {
        appointId: '',
        patientCard: '',
        patientInfo: '',
        patientName: '',
        patientSex: '',
        patientAge: '',
        patientPhone: '',
        institutionName: '',
        itemId: '',
        appointDate: '',
        appointTime: '',
        examineMsg: '',
        remark: '',
      },
      pickerBeginDateBefore:{
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      timeDefaultShow:'',
      roleRules: {
        /*reportCode: [
          {
            required: true,
            message: '请输入条码号',
            trigger: 'blur'
          }
        ],*/
        itemId: [
          {
            required: true,
            message: '请选择预约项目',
            trigger: 'change'
          }
        ],
        appointDate: [
          {
            required: true,
            message: '请选择预约日期',
            trigger: 'blur'
          }
        ],
        appointTime: [
          {
            required: true,
            message: '请输入时间段',
            trigger: 'blur'
          },
          {
            pattern: /^(?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]-(?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]$/,
            message: '时间格式错误',
            trigger: 'blur'
          }
        ],
        patientName: [
          {
            required: true,
            message: '请输入患者姓名',
            trigger: 'blur'
          }
        ],
        patientPhone: [
          {
            required: true,
            message: '请输入患者电话',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  beforeRouteLeave(to,from,next){
    to.meta.keepAlive = true
    next()
  },
  methods: {
    ...mapGetters({
      openTabs: 'getOpenTabs'
    }),
    ...mapActions({
      setOpenTabs: 'setOpenTabs',
      setActiveIndexPath: 'setActiveIndexPath',
      setDeleteTabs: 'setDeleteTabs',
      replaceOpenTab: 'replaceOpenTab'
    }),
    init () {
      if (this.$route.query.id) {
        this.getData()
        this.listAppointItem()
      }
    },
    listAppointItem () {
      // 搜索项目列表
      let _this = this
      let cond = {
        itemId: this.$route.query.itemId
      }
      AppointItemApi.getAppointItemSelect(cond)
        .then(res => {
          setTimeout(() => {
            _this.pickAppointItemList = res.data.map(item => {
              return {
                value: item.itemId,
                label: item.itemName
              }
            })
          }, 200)
        })
        .catch(error => {
          _this.pickAppointItemList = []
          console.error(error)
        })
    },
    sureReportClick () {
      this.$refs.appointForm.validate(valid => {
        if (valid) {
          this.$confirm(
            message.MSG_CONFIRM_SAVE_ALTER,
            message.TITLE_PROMPT,
            {}
          ).then(() => {
            if (this.appointForm.appointId) {
              this.alterReport()
            } else {
              return
            }
          })
        }
      })
    },
    alterReport () {
      let _this = this
      let appointFormData = {
        appointId: _this.appointForm.appointId,
        patientName: _this.appointForm.patientName,
        patientSex: _this.appointForm.patientSex,
        patientAge: _this.appointForm.patientAge,
        patientPhone: _this.appointForm.patientPhone,
        patientCard: _this.appointForm.patientCard,
        patientInfo: _this.appointForm.patientInfo,
        itemId: _this.appointForm.itemId,
        appointDate: _this.appointForm.appointDate,
        appointTime: _this.appointForm.appointTime,
        examineMsg: _this.appointForm.examineMsg,
        remark: _this.appointForm.remark
      }
      AppointApi.editAppoint(appointFormData)
        .then(data => {
          this.$Utils.notifySuccess()
          this.returnList()
        })
    },
    getData () {
      AppointApi.getAppointInfo({
        appointId: this.$route.query.id
      }).then(res => {
        this.$Utils.bindingBean(this.appointForm, res.data)
        this.appointForm.itemId = parseInt(res.data.itemId)
        this.appointForm.patientSex = parseInt(res.data.patientSex)
      })
    },
    returnList () {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/appoint/appointManagement' })
    }
  },
  mounted () {
    this.timeDefaultShow = new Date()
    this.init()
  }
}
</script>
<style lang="scss" src="@/assets/css/views/add.scss" scope>
</style>
